CSSのwidth: 100%;のより良い代替手段として、stretchキーワードが実はかなり便利です
Post on:2024年11月21日
幅いっぱいの要素から左右のマージンを引きたいときに、こういうCSSを使用すると思います。width: calc(100% - 48px);
便利なCSSですが、マージンを計算する必要があり、デザインの変更があった際はCSSも変更する必要もあります。
そこでstretch
キーワードを使用すると、便利です。要素はオーバーフローせずに使用可能なスペースいっぱいに表示され、マージンの計算も必要なくなります。
The stretch keyword: a better alternative to width: 100% in CSS?
by Ollie Williams
商用利用OKの無料版と有料版が同時リリース! お蕎麦みたいな線でデザインされた面白いフォント「そばとうどん」
Post on:2024年11月19日
「はんなり明朝」「こころ明朝体」をはじめ、最近では「海と山のろごごち」「うさぎと満月のサンセリフ」「ビルの谷間と高架下」などのフォントをリリースされているTyping Artから、完全新作となるフリーフォントがリリースされました!
今回は、無料版の「SOBA & UDON」と有料版の「そばとうどん」です。「SOBA & UDON」は英数記号文字のみ、「そばとうどん」はひらがな・カタカナ・英数記号文字が揃っています。
アドビのブラックフライデーが開催! AmazonでCreative Cloud コンプリートプランが驚きの46%オフ、ただし新規購入者に限る
Post on:2024年11月18日
11/29からのAmazon ブラックフライデー セールに先駆けて、Amazonでアドビセールが開催されています!
Amazonでのアドビセールは11/29まで、Adobe CC コンプリートプラン、Illustrator単体プランが期間限定でかなりお買い得になっています。ただし新規購入者に限ります(涙
Webサイトのデザインをより良くするにはどうすればよいのか! 洗練されていく工程が詳しく解説された良書 -WebデザインプロセスBook
Post on:2024年11月15日
※本ページは、アフィリエイト広告を利用しています。
こういうデザインの解説書は、初めてです!
デザイナーは何を考え、どのように作っていくのか。ヒアリングから始まり、ワイヤーフレームを設計し、デザインカンプに落とし込み、最終形までチェックバックを重ねてブラッシュアップをするまでのデザイナーの意図や考え、デザインのテクニックなどを細かく解説したデザイン書を紹介します。
他人がどのような工程で行っているかを見ることはなかなかないので、かなり貴重な本だと思います。
Web制作者は要チェック! Chrome 131で新しく追加された8つのCSSの機能
Post on:2024年11月14日
Chrome 131で追加された、CSSの新しい機能8つを紹介します。
今回のアップデートでは、CSSのハイライト継承が変更されたり、details
要素で実装するアコーディオンのCSSが追加されたり、ページ余白ボックスを使用した印刷レイアウトが簡単になるなど、Web制作者は要チェックです!
商用利用も無料、ポテ字フォントがリリース! ほくほくのフライドポテトのようなかわいいフリーフォント -ポテジフェイス
Post on:2024年11月13日
「ninaSchoolgirl」「になロマン」「くちばしフォント」「最強少女」など、楽しくてかわいいフリーフォントをたくさんリリースされている213ちゃんから、新作フリーフォントがリリースされました!
今回は、文字のデザインにフライドポテトが取り入れられた「ポテジフェイス」
ほくほくのフライドポテトのような、おいしそうなかわいいフォントです。
フリーフォント:ポテジフェイス(Potejiface_font)【商用可】
写真: Unsplashのhenry perksが撮影
CSSのデバッグにAIがどのように役立つか、Chrome 131のデベロッパーツールでAIアシスタントが使えるようになります
Post on:2024年11月12日
CSSの検証やデバッグに、デベロッパーツールを使用している人も多いと思います。そんなデベロッパーツールですが、Chrome 131からAIアシスタントが使えるようになり、AIがCSSの検証やデバッグにどのように役立つかを紹介します。
5 Cool Things To Do with DevTools AI Assistance
AI assistance panel
AI assistance for styling
by Matthias Rohmer
UI用のアニメーションがかわいくて楽しい! 商用利用も無料、アニメーションで動くアイコン素材 -pqoqubbw/icons
Post on:2024年11月11日
WebサイトやスマホアプリのUIデザイン用にかわいくて楽しいアニメーションで動くアイコン素材を紹介します。
ハンバーガー用の×に変化するアニメーション、@を一筆書きで描くアニメーション、時計の針がくるくる回るアニメーションなど、ReactのモーションライブラリFramerを使用した動くアイコンがたくさん揃っています。